<template>
  <div class="search-area v-align-c">
    <div class="search-box flex">
      <el-input :placeholder="placeholder" v-model="goodsName">
      </el-input>
      <el-button type="primary" @click="searchRes">搜索</el-button>
    </div>
    <div class="font-14 clear-input-btn mar-l-24 v-align-c pointer" @click="resetComditions">
      <i class="el-icon-refresh font-18" :class="refresh ? '_icon_refresh':''"></i>
      <span class="mar-l-4">清除筛选条件</span>
    </div>
    <div class="font-14 result-info font-white mar-l-27">
      <span class="font-w">{{total}}</span>
      <span>条结果</span>
    </div>
    <div class="font-14 font-white sales-info mar-l-29">
      <span class="font-w" v-formatNum="totalAmount"></span>
      <span>元销售额</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total: 0,
    totalAmount: {
      type: String,
      default: '0'
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      goodsName: '',
      refresh: false
    }
  },
  mounted() {
  },
  methods: {
    searchRes() {
      this.$emit('searchRes', this.goodsName)
    },
    // 重置筛选条件
    resetComditions() {
      console.log('reset')
      this.goodsName = ''
      this.$bus.$emit('resetComditions')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .search-area {
    height: 100%;
    .pointer:hover{
      cursor:pointer
     }
    .search-box {
      /deep/ .el-button {
        border-radius: 0px;
        width: 64px;
        padding: 0px;
        background: #0A89FF;
      }
      /deep/ .el-button--medium {
        border-radius: 0px;
      }
      /deep/ .el-input {
        width: 488px;
      }
      /deep/ .el-input__inner {
        border-radius: 0px;
        background: #2B2B2E;
        border: 1px solid #66666D;
        height: 40px;
        width: 488px;
      }
    }
    .clear-input-btn {
      color: #1072CD;
    }
    .result-info {
      &>span:nth-child(1) {
        color: #FF9000;
      }
    }
    .sales-info {
      &>span:nth-child(1) {
        color: #FF2C1E;
      }
    }
  }
</style>